import styled from "styled-components"

export const DetailPicturesWrapper = styled.div`
  > .pictures {
    display: flex;
    height: 600px;
    flex-shrink: 0;
    overflow: hidden;
  }
  .left {
    width: 50%;
    height: 100%;
    .item-left {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &:hover {
        .cover {
          opacity: 0 !important;
        }
        img {
          transform: scale(1.1);
          transition: transform 200ms ease;
        }
        .item-left:hover {
          opacity: 0.4 !important;
        }
      }
    }
  }
  .right {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
    height: 100%;
    .item-right {
      position: relative;
      overflow: hidden;
      width: 50%;
      height: 50%;
      display: flex;
      flex-wrap: wrap;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &:hover {
        .cover {
          opacity: 0 !important;
        }
        img {
          transform: scale(1.1);
          transition: transform 200ms ease;
        }
        .item-right:hover {
          opacity: 1 !important;
        }
      }
    }
  }
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0);
    opacity: 0.4;
    transition: opacity 200ms ease;
  }
  .show-btn {
    position: absolute;
    right: 10px;
    bottom: 17%;
    > button {
      font-size: 14px;
      padding: 7px;     
      border: 1px solid #ccc;
      border-radius: 3px;
      cursor: pointer;
    }
  }
`
